<template>
  <px-dialog v-model="visible" width="600" :title="`${handleType === 'Add' ? '新增' : '编辑'}节能决策`" @close="cancel">
    <div>
      <px-form ref="formRef" :model="formParams" :rules="rules" :validate-on-rule-change="false" label-width="120px">
        <px-form-item label="节能事项名称" prop="name">
          <px-input v-model="formParams.name" placeholder="请输入" maxLength="50" clearable style="width: 100%" />
        </px-form-item>
        <px-form-item label="节约能源" prop="energy">
          <px-select v-model="formParams.energy" placeholder="请选择能源" filterable clearable style="width: 100%">
            <px-option v-for="item in energyList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="执行时间" prop="executeTime">
          <px-date-picker
            v-model="formParams.executeTime"
            type="monthrange"
            value-format="YYYY-MM"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            style="width: 100%"
            clearable
          />
        </px-form-item>
        <px-form-item label="执行人" prop="executor">
          <px-select v-model="formParams.executor" placeholder="请选择执行人" filterable clearable style="width: 100%">
            <px-option v-for="item in personList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="负责人" prop="leader">
          <px-select v-model="formParams.leader" placeholder="请选择负责人" filterable clearable style="width: 100%">
            <px-option v-for="item in personList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="节能描述" prop="description">
          <px-input
            v-model="formParams.description"
            maxLength="200"
            placeholder="请输入节能描述"
            style="width: 100%"
            :rows="5"
            clearable
            type="textarea"
          />
        </px-form-item>
      </px-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancel">取消</px-button>
        <px-button type="primary" @click="save">保存</px-button>
      </span>
    </template>
  </px-dialog>
</template>
<script setup>
import { computed, ref, reactive, toRefs, onMounted, nextTick } from "vue";
import { getPersonListAPI } from "@/api/knowledge/documentManage";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  handleType: {
    type: String,
    default: ""
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});

const emits = defineEmits(["update:visible"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const formRef = ref(null);

const energyList = ref([
  {
    name: "电",
    value: "electricity"
  },
  {
    name: "自来水",
    value: "running"
  },
  {
    name: "再生水",
    value: "reclaim"
  },
  {
    name: "天然气",
    value: "ng"
  },
  {
    name: "蒸汽",
    value: "steam"
  },
  {
    name: "热水",
    value: "hot"
  },
  {
    name: "CDA",
    value: "cda"
  },
  {
    name: "N2",
    value: "n2"
  },
  {
    name: "H2",
    value: "h2"
  },
  {
    name: "O2",
    value: "o2"
  },
  {
    name: "Ar",
    value: "ar"
  },
  {
    name: "He",
    value: "he"
  },
  {
    name: "CO2",
    value: "co2"
  },
  {
    name: "柴油",
    value: "diesel"
  }
]);

const state = reactive({
  formParams: {
    name: "",
    energy: "",
    executeTime: [],
    executor: "",
    leader: "",
    description: ""
  },
  personList: []
});
const { formParams, personList } = toRefs(state);

const rules = computed(() => ({
  name: [{ required: true, message: "节能事项名称不能为空", trigger: "blur" }],
  energy: [{ required: true, message: "节约能源不能为空", trigger: "change" }],
  executeTime: [{ required: true, message: "执行时间不能为空", trigger: "blur" }],
  executor: [{ required: true, message: "执行人不能为空", trigger: "change" }],
  leader: [{ required: true, message: "负责人不能为空", trigger: "change" }]
}));

onMounted(() => {
  getPersonList();
});

const getPersonList = async () => {
  state.personList = await getPersonListAPI();
  state.personList.forEach(item => {
    item.id = item.userId;
    item.name = `${item.username}-${item.realName}`;
    item.value = item.userId;
  });
  const data = props.rowData;
  if (props.handleType === "Edit") {
    state.formParams = {
      name: data.name,
      energy: data.kind,
      executeTime: [data.startTime, data.endTime],
      executor: state.personList.filter(item => `${item.username}-${item.realName}` === data.executor)[0].userId,
      leader: state.personList.filter(item => `${item.username}-${item.realName}` === data.owner)[0].userId,
      description: data.description
    };
  }
};

const cancel = () => {
  emits("update:visible", false);
};

const save = () => {
  formRef.value?.validate(async validate => {
    if (validate) {
      emits("save", state.formParams);
    }
  });
};
</script>
